﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 检索部分 -->
      <div class = 'page_searchContent'>
        <el-input placeholder = "请输入名称进行检索" v-model = 'searchKey' prefix-icon = "el-icon-search" clearable></el-input>
      </div>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for = '(item) in tableColumn' :key = 'item.indexName' :label = 'item.text' :width = "item.indexName === 'is_warnning' || item.indexName === 'is_error' ? '100px' : 'auto'">
            <template slot-scope = 'scope'>
              <span v-if = "item.indexName === 'is_warnning'" :class = "scope.row[item.indexName] ? '' : 'selfdefine_td_color'"
              :style = "{color: (scope.row[item.indexName] ? 'red' : '#333')}">{{scope.row[item.indexName] ? ('是(' + scope.row.warnning_msg + ')') : '否'}}</span>
              <span v-else-if = "item.indexName === 'is_error'" :class = "scope.row[item.indexName] ? '' : 'selfdefine_td_color'"
              :style = "{color: (scope.row[item.indexName] ? 'red' : '#333')}">{{scope.row[item.indexName] ? ('是(' + scope.row.error_msg + ')' ): '否'}}</span>
              <span v-else>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '220'>
            <template slot-scope = "scope">
              <!-- <el-button type='text' @click="getDefinePage(scope.row)"><i class='iconfont icon-upload'></i>生成菜单</el-button> -->
              <el-button type = 'text' @click = "handlePreview(scope.row)">预览<i class = 'iconfont icon-yanj' style = "margin: 0 0 0 3px"></i></el-button>
              <el-button type = 'text' @click = "handleEdit(scope.row)">编辑<i class = 'iconfont icon-bianji' style = "margin: 0 0 0 3px"></i></el-button>
              <!-- <el-button type='text' @click="handleDelete(scope.row)"><i class='iconfont icon-shanchu'></i>删除</el-button> -->
              <el-dropdown class = 'tableDropdown' @command = "handleCommand">
                <span class = "el-dropdown-link">
                  更多<i class = "el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot = "dropdown" class = 'dropdownMenu'>
                  <el-dropdown-item :command = "{'index': 1, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-upload'></i>生成菜单
                  </el-dropdown-item>
                  <el-dropdown-item :command = "{'index': 2, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-iconset0137'></i>校正错误
                  </el-dropdown-item>
                  <el-dropdown-item :command = "{'index': 3, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-jilianxuanze'></i>忽略警告
                  </el-dropdown-item>
                  <el-dropdown-item :command = "{'index': 4, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-shanchu'></i>删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd ()'>添加页面</el-button>
          <el-button type = "primary" @click = 'handleCopy ()'>复制页面</el-button>
          <el-button type = "primary" @click = 'exportPageInfo.dialog = true'>导出页面</el-button>
          <el-button type = "primary" @click = 'importPageInfo.dialog = true'>导入页面</el-button>
        </div>
        <div class = 'page_paginationContent'>
          <el-pagination
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加页面的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = "closeDialog">
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules' v-loading = 'loading'>
        <el-form-item label = "名称：" prop = 'name'>
          <el-input v-model = 'ruleForm.name' placeholder = "请输入动态页面名称"></el-input>
        </el-form-item>
        <el-form-item label = "描述：">
          <el-input v-model = 'ruleForm.desc' placeholder = "请输入动态页面描述" type = 'textarea' autosize></el-input>
        </el-form-item>
        <el-form-item label = "路由：">
          <el-input v-model = 'ruleForm.route' placeholder = "请输入动态页面路由"></el-input>
        </el-form-item>
        <el-form-item label = "类别：">
          <el-input v-model = 'ruleForm.category' placeholder = "请输入动态页面类别"></el-input>
        </el-form-item>
        <el-form-item label = "页面参数：">
          <el-input :value = "ruleForm.settings ? '点击修改页面' : '点击设置页面参数'" placeholder = "点击设置页面参数" @focus = 'editSettingsForm'></el-input>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 复制页面的弹窗 -->
    <el-dialog v-drag title = '复制页面' :visible.sync = 'copyFormVisible' width = '40%' @close = 'closeCopyDialog'>
      <el-form :model = 'copyRuleForm' ref = 'copyRuleForm' :label-width = 'copyLabelWidth' :rules = 'copyRules' v-loading = 'loading'>
        <el-form-item label = '新页面名称：' prop = 'name'>
          <el-input v-model = 'copyRuleForm.name' placeholder = "请输入新增的动态页面名称"></el-input>
        </el-form-item>
        <el-form-item label = '复制的页面：' prop = 'copyFormUid'>
          <el-select v-model = 'copyRuleForm.copyFormUid' placeholder = "请选择需要复制的动态页面" clearable filterable>
            <el-option v-for = 'item in allCopyPages' :key = 'item.uid' :value = 'item.uid' :label = 'item.name'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = "新页面描述：">
          <el-input v-model = 'copyRuleForm.desc' placeholder="请输入新增的动态页面描述" type = 'textarea' autosize></el-input>
        </el-form-item>
        <el-form-item label = "新页面路由：">
          <el-input v-model = 'copyRuleForm.route' placeholder="请输入新增的动态页面路由"></el-input>
        </el-form-item>
        <el-form-item label = "新页面类别：">
          <el-input v-model = 'copyRuleForm.category' placeholder = "请输入新增的动态页面类别"></el-input>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "resetCopyForm ('copyRuleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitCopyForm ('copyRuleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 设置页面参数的弹窗 -->
    <Settings-Dialog :showSettingsDialog = 'showSettingsDialog' :currentRow = 'ruleForm' @giveUp = 'showSettingsDialog = false' @sureEditSetting = 'sureEditSetting'></Settings-Dialog>
    <!-- 预览的弹窗 -->
    <el-dialog v-drag title = '预览页面设置效果' :visible.sync = 'priviewPageSettings' width = '80%'>
      <Show-Form-Layout v-if = "priviewPageSettings" :data = "priviewPageSettingsInfo" ref = "generateForm"></Show-Form-Layout>
    </el-dialog>
    <!-- 生成菜单的弹窗 -->
    <V-Menu :menuDialog = 'menuDialog' :functionObj = 'functionObj' @giveUpFunc = 'menuDialog = false'></V-Menu>
    <!-- 导出页面的弹窗 -->
    <Export-Method :exportDialog = 'exportPageInfo.dialog' :exportTitle = 'exportPageInfo.title' :exportApiRouter = 'exportPageInfo.apiRouter' :type = 'exportPageInfo.type'
    :selectOption = 'totalData' @closeExportOperation = 'exportPageInfo.dialog = false'></Export-Method>
    <!-- 导入页面的弹窗 -->
    <Import-Method :importDialog = 'importPageInfo.dialog' :importTitle = 'importPageInfo.title' :importApiRouter = 'importPageInfo.apiRouter'
    @giveUpImportOperation = 'importPageInfo.dialog = false' @finishedImportOperation = 'finishedImportOperation'></Import-Method>
  </div>
</template>

<script src='./dynamicPage.js'></script>
